<!-- 产品碳足迹-产品碳足迹-添加产品弹窗 -->

<template>
  <div>
    <a-drawer :title="$t('message.Add_product')" :width="600" :visible="visible" :body-style="{ paddingBottom: '80px' }"
              @close="onClose">
      <div class="table-page-search-wrapper">
        <a-form-model :model="formObj" layout="inline" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-model-item :label="$t('message.Product_category')" required>
            <a-select v-model="formObj.productTypeId" allowClear :placeholder="$t('message.Please_select')" show-search
                      :filter-option="filterOption" @change="onChangeProductTypeId">
              <a-select-option :value="item.value" v-for="(item,index) in product_typeData" :key="item.value">
                {{ item.text }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item :label="$t('message.Product_name')" required>
            <a-input v-model="formObj.productName" allowClear :placeholder="$t('message.Please_enter')"></a-input>
          </a-form-model-item>
          <!-- <a-form-model-item :label="$t('message.Product_NO')" required>
            <a-input v-model="formObj.productCode" allowClear :placeholder="$t('message.Please_enter')"></a-input>
          </a-form-model-item> -->
          <a-form-model-item :label="$t('message.Specifications_and_models')" required>
            <a-input v-model="formObj.productSpecification" allowClear :placeholder="$t('message.Please_enter')"></a-input>
          </a-form-model-item>
          <a-form-model-item :label="$t('message.Unit')" required>
            <a-select v-model="formObj.productUnitId" allowClear :placeholder="$t('message.Please_select')" @change="onChangeProductUnitId">
              <a-select-opt-group :key="key" :value="key" :label="key"
                                  v-for="(value, key, index) in getAllUnitByGroupData">
                <a-select-option :key="itemA.id" :value="itemA.id" v-for="(itemA,indexA) in value">
                  {{ itemA.unitCode }}
                </a-select-option>
              </a-select-opt-group>
            </a-select>
          </a-form-model-item>
          <a-form-model-item  :label="$t('message.Unit_product_weight')" required>
              <a-input-number v-model="formObj.productWeight"  :precision="2" :step="0.01"
                              allowClear :placeholder="$t('message.Please_enter')" style="width: 49%;"/>
              <div style="width: 2%;display: inline-block"></div>
              <a-select v-model="formObj.productWeightUnit"  :filter-option="filterOption" allowClear
                        :placeholder="$t('message.please_select_unit')" show-search style="width: 49%" @change="onChangeProductWeightUnit">
                <a-select-option v-for="(item,index) in weightUnitData" :key="index" :value="item">
                  {{ item }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          <!-- <a-form-model-item :label="$t('message.Weight')" required>
            <a-input-number v-model="formObj.productWeight" allowClear :placeholder="$t('message.Please_enter')"
                            :step="0.01" :precision="2" style="width: 100%"></a-input-number>
          </a-form-model-item>
          <a-form-model-item :label="$t('message.Weight_unit')" required>
            <a-select v-model="formObj.productWeightUnit" allowClear :placeholder="$t('message.Please_select')" show-search
                      :filter-option="filterOption" @change="onChangeProductWeightUnit">
              <a-select-option :value="item" v-for="(item,index) in weightUnitData" :key="index">
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-model-item> -->
          <div class="uploadTitle">{{$t('message.Product_image')}}</div>
          <div class="uploadContent">
            <j-image-upload class="avatar-uploader" v-model="formObj.productPic"></j-image-upload>
          </div>
          <div>
            <div class="uploadTitle">{{$t('message.Product_Introduction')}}</div>
            <div class="uploadContent">
              <div style="position: relative" class="flexOne">
                <textarea
                  v-model="formObj.productIntroduction"
                  class="textarea flexOne"
                 :placeholder="$t('message.Please_enter')"
                  name=""
                  id=""
                  cols="30"
                  rows="10"
                ></textarea>
                <div class="length" v-if="formObj.productIntroduction">{{formObj.productIntroduction.length}}/500</div>
              </div>
            </div>
          </div>
        </a-form-model>
      </div>
      <div class="drawerOptionBox">
        <a-button style="margin-right: 8px;" @click="onClose">{{$t('message.Cancel')}}</a-button>
        <a-button type="primary" @click="onSubmit"> {{$t('message.Confirm')}}</a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import {getAction, postAction} from '@/api/manage'

export default {
  name: 'addfootprintProductForm',
  components: {},
  data() {
    return {
      loading: false,
      queryParam: {},
      dataSource: [], // 我的添加数据
      isShowDetailPopup: false, // 详情弹窗
      formObj: {
        productIntroduction:''
      },
      visible: false,
      labelCol: {span: 4},
      wrapperCol: {span: 14},
      product_typeData: [], // 产品类型
      weightUnitData: ['g', 'kg', 't'], // 重量单位
      getAllUnitByGroupData: {}, // 单位分组数据
    };
  },
  created() {
  },
  methods: {
    /**
     * 修改产品类型
     */
    onChangeProductTypeId(e) {
      console.log('onChangeProductTypeId', e)
      let theIndex = this.product_typeData.findIndex(ele => ele.value == e)
      if (theIndex > -1) {
        this.formObj.productTypeName = this.product_typeData[theIndex].text
      }
    },
    /**
     * 修改产品单位
     */
    onChangeProductUnitId(e) {
      console.log('onChangeProductUnitId', e, this.getAllUnitByGroupData)
      for (let key in this.getAllUnitByGroupData) {
        let value = this.getAllUnitByGroupData[key]
        for (let index = 0; index < value.length; index++) {
          if (value[index].id == e) {
            this.formObj.productUnitName = value[index].unitCode
          }
        }
      }
    },
    /**
     * 修改产品重量单位
     */
    onChangeProductWeightUnit(e) {
      console.log('onChangeProductWeightUnit', e)
    },
    /**
     * 检查添加产品表单数据
     */
    checkFormData() {
      if (!this.formObj.productTypeId) {
        this.$message.warn(this.$t('message.please_select_product_type'))
        return false
      }
      if (!this.formObj.productName) {
        this.$message.warn(this.$t('message.please_select_product_name'))
        return false
      }
      // if (!this.formObj.productCode) {
      //   this.$message.warn(this.$t('message.please_select_product_NO'))
      //   return false
      // }
      if (!this.formObj.productSpecification) {
        this.$message.warn(this.$t('message.please_enter_specification_model'))
        return false
      }
      if (!this.formObj.productUnitId) {
        this.$message.warn(this.$t('message.please_select_unit'))
        return false
      }
      if (!this.formObj.productWeight) {
        this.$message.warn(this.$t('message.please_select_weight'))
        return false
      }
      if (!this.formObj.productWeightUnit) {
        this.$message.warn(this.$t('message.please_select_weight_unit'))
        return false
      }
      return true
    },
    /**
     * 提交添加产品
     */
    onSubmit() {
      console.log('onSubmit', this.formObj)
      if (this.checkFormData()) {
        postAction('/footprintProduct/cyFootprintProduct/saveProduct', this.formObj).then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.$emit('back')
            this.onClose()
          }
        });
      }
    },
    getData() {
      // 产品类型
      getAction('/sys/api/getDictItems', {
        dictCode: 'product_type'
      }).then((res) => {
        this.product_typeData = res || []
        console.log('getDictItems product_type =>', res)
      });
      // 单位
      getAction('/emission/factor/cyEmissionUnit/getAllUnitByGroup').then((res) => {
        if (res.success) {
          this.getAllUnitByGroupData = res.result || {}
        }
      });
    },
    // ==============================================================================
    /**
     * 下拉框数据过滤
     */
    filterOption(input, option) {
      return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    /**
     * 关闭抽屉，初始化数据
     */
    onClose() {
      this.formObj = {}
      this.visible = false;
    },
  },
};

</script>

<style lang="less" scoped>
&:focus-visible {
  outline: 0px;
}
.length {
  font-weight: 400;
  font-size: 12px;
  color: #888888;
  position: absolute;
  right: 8px;
  bottom: 10px;
}
.textarea {
  width: 100%;
  height: 119px;
  font-weight: 400;
  font-size: 14px;
  border: 1px solid #dcdcdc;
  color: #333333;
  resize: none;
  padding: 8px;
}
.flexOne {
  flex: 1;
}
/deep/ .ant-card-body {
  background: #F5F8F7;
}

.drawerOptionBox {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e9e9e9;
  padding: 10px 16px;
  background: #fff;
  text-align: right;
  z-index: 1;
}

.uploadTitle {
  color: rgba(0, 0, 0, 0.85);
}

.uploadContent {
  margin-top: 11px;
}

</style>
